<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mask</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      background-color: antiquewhite;
      /* vw  vh   vmin  vmax ; */
      /* font-size: initial  inherit  unset; */
      width: 100%;
      height: 100vh;
      /* font-size: clamp(1rem, 5.2vw, 2rem); */
      mask-image: linear-gradient(180deg, transparent, #000, transparent);
      mask-repeat: no-repeat;
      mask-size: 100% 40%;
      /*       box-shadow: 0rem 0rem .1rem #000;
      filter: drop-shadow(0rem 0rem .1rem #000); */
      /* transiton闪屏 */
      /* //设置内联的元素在3D 空间如何呈现：保留 */
      /* -webkit-transform-style: preserve-3D; */
      /* //设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
      /* -webkit-backface-visibility: hidden; */
      /* 上下拉动滚动条时卡顿、慢 */
      /* -webkit-overflow-scrolling: touch; */
      /* overflow-scrolling: touch; */
      /* 长时间按住页面出现闪退 */
      /* -webkit-touch-callout: none; */
    }

    .parent {
      width: 3rem;
      height: 3rem;
      /* 溢出部分回弹效果 , 在嵌套滚动中, 给里面的容器设置overscroll-behavior: contain; */
      overscroll-behavior: contain;
      /* background-color: red; */
      /*缓动滚动*/
      scroll-behavior: smooth;
    }

    .child {
      width: 1rem;
      height: 1rem;
      background-color: blue;
      position: absolute;
      left: 5rem;
      top: 3rem;
    }

    .box {
      color: #000;
    }

    /* 媒体查询设备像素比 */
    /* @media only screen and (min-device-pixel-ratio: 1.5) {
      .parent {
        background-color: green;
      }
    }

    @media only screen and (device-pixel-ratio: 1.5) {
      .parent {
        background-color: red;
      }
    }

    @media only screen and (max-device-pixel-ratio: 3) {
      .parent {
        background-color: rgb(34, 0, 128);
      }
    } */
  </style>

  <div class="parent">
    <div class="child"></div>
  </div>

  <h3 class="h3">
    分工撒
    <div>
      7897
      <div>div你好</div>
    </div>
    <p>p标签</p>
  </h3>
</head>

<body>
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus hic quidem ratione recusandae explicabo
    laboriosam eligendi sint assumenda earum maxime voluptatum doloremque perspiciatis nam aperiam ipsum, blanditiis
    fugit, corrupti consequatur!
  </div>

  <button>按钮</button>

  <script>
    const parent = document.querySelector('.parent');
    const child = document.querySelector('.child');
    parent.addEventListener('click', (e) => {
      console.log('parent');
    }); //
    child.addEventListener('click', (e) => {
      console.log('child');
    });

    // new Promise((resolve) => {
    //   resolve(5)
    //   setTimeout(() => {
    //     Promise.resolve().then(() => {
    //       console.log(1)
    //     })
    //     console.log(2)
    //   })
    //   Promise.resolve().then(() => {
    //     console.log(3)
    //   })
    //   console.log(4)
    // }).then((v) => {
    //   console.log(v)
    // })

    // const obj = {
    //   current: {
    //     value: 1
    //   },
    //   get add() {
    //     return this.current += 1;
    //   }
    // }
    // const aaa = obj.current;
    // obj.current.value = 2;
    // console.log('==obj====>', obj)
    // console.log('==aaa====>', aaa)
    const arr = [11, 22, 33, 44, 55];
    const len = arr.splice(0, 1)[11];

    const obj = {
      a: 1,
      b: 2,
    };

    // Promise.resolve().catch(err => {
    //   console.log('==err====>', err)
    // })
    // new Promise((resolve, reject) => {
    //   resolve(1)
    // }).then(res => {
    //   console.log('==res====>', res)
    //   // return val ===  Promise.resolve(val)
    // },).then(v => {
    //   console.log('==v====>', v)
    // })

    // const str = '1\n\t'
    // console.log('==str====>', str.length)

    // while (true) {
    //   console.log("这是一个死循环");
    // }

    function* funcc() {
      console.log('第一次yield之前');
      let a = yield setTimeout(() => {
        console.log('==  1 ===>');
      }, 1000);
      console.log('a', a);
      let b = yield setTimeout(() => {
        console.log('==  2 ===>');
      }, 10);
      console.log('b', b);
      return 999;
    }
    const sad = funcc();

    // Object.prototype.toString.call('') === '[object String]'
    //   && Object.prototype.toString.call(null) === '[object Null]'
    //   && Object.prototype.toString.call(undefined) === '[object Undefined]'
    //   && Object.prototype.toString.call(NaN) === '[object Number]'
    //   && Object.prototype.toString.call(Symbol()) === '[object Symbol]'
    //   && Object.prototype.toString.call(true) === '[object Boolean]'
    //   && Object.prototype.toString.call(function () {}) === '[object Function]'
    //   && Object.prototype.toString.call([]) === '[object Array]'
    //   && Object.prototype.toString.call({}) === '[object Object]'
    //   && Object.prototype.toString.call(new Date()) === '[object Date]'
    //   && Object.prototype.toString.call(new RegExp()) === '[object RegExp]'
    //   && Object.prototype.toString.call(new Error()) === '[object Error]'
    //   && Object.prototype.toString.call(new Map()) === '[object Map]'
    //  && Object.prototype.toString.call(new Set()) === '[object Set]'
    //  && Object.prototype.toString.call(new WeakMap()) === '[object WeakMap]'
    //  && Object.prototype.toString.call(new WeakSet()) === '[object WeakSet]'
    //  && Object.prototype.toString.call(new Promise(() => {})) === '[object Promise]'
    //  && Object.prototype.toString.call(new Int8Array()) === '[object Int8Array]'
    //  && Object.prototype.toString.call(new Uint8Array()) === '[object Uint8Array]'
    //  && Object.prototype.toString.call(new Uint8ClampedArray()) === '[object Uint8ClampedArray]'
    //  && Object.prototype.toString.call(new Int16Array()) === '[object Int16Array]'

    const parser = new DOMParser();
    const htmlString = `<div class=test>
                          <h1>
                            Hello World
                            <P>P标签</P>
                          </h1>
                        </div>`;
    const doc = parser.parseFromString(htmlString, 'text/html');
    console.log('===textContent===>', doc.body.textContent);
    console.log('===innerHTML===>', doc.body.innerText);

    // const cleanedStr = doc.body.textContent.replace(/[\n\s]/g, '');

    const h3 = document.querySelector('h3');
    console.log('===h3.textContent===>', h3.textContent);
    console.log('===h3.innerText===>', h3.innerText);

    // function fn1() {
    //   console.log('=== fn1===>');
    //   // return 11
    //   throw 111;
    // }
    // function fn2() {
    //   console.log('=== start===>');
    //   fn1();
    //   console.log('=== fn2===>');
    // }
    // fn2();
  </script>
</body>

</html>